<template>
  <el-row :gutter="20"
          :class="['detail-row',base?'base-info':'']">
    <el-col v-for="(item,index) in infoArr"
            :key="index"
            :span="item.value?item.col:1"
            class="mtb5">
      <span v-if="item.value">
        <label class="labelSty">{{item.label}}</label>
        <text-overflow class="detail-text"
                       :text="item.value" />
      </span>
    </el-col>
  </el-row>
</template>

<script>
import TextOverflow from "@/components/public/TextOverflow.vue"
export default {
  name: "SimpleList",
  components: {
    TextOverflow
  },
  props: {
    base: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => { return {} }
    },
    configData: {
      type: Array,
      default: () => { return [] }
    }
  },
  computed: {
    infoArr () {
      this.configData.forEach(element => {
        element.value = this.info[element.type] || 0
      });
      return this.configData
    }
  }
}
</script>

<style lang="scss" scope>
.base-info {
  background: #f6f6f6;
  padding: 10px 10px 0;
}
.detail-row {
  > div > span {
    margin-bottom: 10px;
    display: flex;
    font-size: 16px;
    align-items: center;
  }
  span {
    label {
      display: inline-block;
      margin-right: 10px;
      white-space: nowrap;
    }
    .detail-text {
      font-weight: bold;
      font-size: 16px;
    }
  }
}
.labelSty {
  font-size: 16px;
  color: var(--prev-color-text-silvergrey);
}
.mtb5 {
  margin: 5px 0;
}
</style>
